import { Color, EChartsOption, TooltipComponentOption } from "echarts";
function getColorSteps(color1: string, color2: string): Color {
  return {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: color1,
      },
      {
        offset: 1,
        color: color2,
      },
    ],
  };
}
export function getToolTip(
  options: TooltipComponentOption = {}
): EChartsOption["tooltip"] {
  const formatter: TooltipComponentOption["formatter"] = (params) => {
    if (!Array.isArray(params)) {
      params = [params];
    }
    return `<div style="color: #fff;font-size: 12px">
            ${params.map((t) => `<div>${t.name}: ${t.data}</div>`).join("")}
          </div>`;
  };
  return Object.assign(
    {
      trigger: "axis",
      padding: 10,
      borderColor: "#fff",
      backgroundColor: "#0b4270",
      textStyle: { color: "#fff" },
      formatter,
    },
    options
  );
}
function getEchartUnit(text = "单位：万元") {
  return {
    text,
    right: "4%",
    top: "1%",
    textStyle: {
      fontSize: 11,
      color: "#fff",
      fontWeight: "normal",
    },
  };
}
export function getBarOption({
  colorStep = ["rgba(39, 229, 165, 0.9)", "rgba(39, 229, 165, 0.3)"],
  xdata = [1, 2, 3, 4, 5, 6, 7, 8].map((t) => t + "月"),
  ydata = [22, 33, 44, 11, 55, 33, 11, 34],
} = {}): EChartsOption {
  return {
    // title: [getEchartUnit()],
    tooltip: getToolTip(),
    legend: {},
    grid: {
      bottom: "30pp",
      // bottom: 30,
    },
    xAxis: [
      {
        type: "category",
        axisTick: { show: false },
        data: xdata,
      },
    ],
    yAxis: [
      {
        type: "value",
        splitNumber: 5,
        splitLine: {
          show: true,
          lineStyle: {
            type: "solid",
            color: "rgba(255, 255, 255, 0.3)",
          },
        },
      },
    ],
    series: [
      {
        type: "bar",
        data: ydata,
        color: getColorSteps(colorStep[0], colorStep[1]),
        // label: {
        //   show: true,
        //   position: "top",
        //   color: "#fff",
        //   // formatter: function (params) {
        //   //   return `${params.data.value}%`
        //   // }
        // },
        // emphasis: {
        //   focus: "series",
        // },
        // itemStyle: {
        //   opacity: 0.7,
        // },
        // color: getColorSteps(colorStep[0], colorStep[1]),
        // data: ydata,
      },
    ],
  };
}
